<script setup lang="ts">
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from './level/index.vue'
import Region from './region/index.vue'
import Card from './card/index.vue'
import Tip from './tip/index.vue'
import { ref } from 'vue'
import type {Content,HospitalResponseData} from "@/api/home/type";

let currentPage = ref<number>(1)
let pageSize = ref<number>(10)
import {reqHospital} from "@/api/home";
import {onMounted} from "vue";
let hasHospitalArr = ref<Content>([]);
let total= ref<number>(0);
let hostype= ref<string>('');
let districtCode= ref<string>('');
onMounted(()=>{
 getHospitalInfo();
})
const getHospitalInfo = async ()=>{
  let result: HospitalResponseData = await reqHospital(currentPage.value,pageSize.value,hostype.value,districtCode.value);
  if(result.code==200){
    hasHospitalArr.value = result.data.content;
    total = result.data.totalElements
  }
}
//分页器页码发生变化时回调
const  currentPageChange = ()=>{
  getHospitalInfo();
}
//分页器下拉菜单发生变化时回调
const  pageSizeChange = ()=>{
  getHospitalInfo();
}

//子组件自定义事件：获取儿子给父组件传递过来的等级参数
const getLevel=(level:string)=>{
  hostype.value = level;
  getHospitalInfo();
}
//子组件自定义事件：获取儿子给父组件传递过来的地区参数
const getRegion=(region:string)=>{
  districtCode.value = region;
  getHospitalInfo();
}
</script>

<template>
<div>
<!-- 首页轮播图结构 -->
  <Carousel/>
<!-- 首页搜索医院的表单区域 -->
  <Search/>
<!-- 底部展示医院的结构 -->
  <el-row gutter="20">
    <el-col :span="20">
      <level @getLevel="getLevel"/>
      <Region @getRegion="getRegion"/>
      <div class="hospital" v-if="hasHospitalArr.length>0">
        <Card class="item" v-for="(item,index) in hasHospitalArr" :key="item.id" :hospitalInfo="item"/>
      </div>
      <el-empty v-else description="暂无数据" />
<!--  分页器    -->
      <div>
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper,->, sizes,total"
            :total="total"
            @current-change="currentPageChange"
            @size-change="pageSizeChange"
        />
      </div>

    </el-col>
    <el-col :span="4"><Tip/></el-col>
  </el-row>
</div>
</template>

<style scoped lang="scss">
.hospital{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item{
    width: 48%;
    margin: 10px 0px;
  }
}
</style>
